<!DOCTYPE html>
<html>
<head>
<title>Young's Interference Experiment</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        border: 1px solid #ccc;
        background-color: white;
    }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="420"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';

// Helper function to draw an arrow head.
function drawArrowHead(x, y, angle) {
    const arrowSize = 6;
    ctx.moveTo(x, y);
    ctx.lineTo(x - arrowSize * Math.cos(angle - Math.PI / 6), y - arrowSize * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(x, y);
    ctx.lineTo(x - arrowSize * Math.cos(angle + Math.PI / 6), y - arrowSize * Math.sin(angle + Math.PI / 6));
}

// Helper function to draw a line with arrows at both ends.
function drawDimensionLineWithArrows(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    
    const angle1 = Math.atan2(y2 - y1, x2 - x1);
    drawArrowHead(x2, y2, angle1);
    
    const angle2 = Math.atan2(y1 - y2, x1 - x2);
    drawArrowHead(x1, y1, angle2);
    
    ctx.stroke();
}

// Helper function for horizontal dimension lines with vertical ticks
function drawHorizontalDimensionLine(x1, x2, y, tickSize = 5) {
    ctx.beginPath();
    ctx.moveTo(x1, y);
    ctx.lineTo(x2, y);
    ctx.moveTo(x1, y - tickSize);
    ctx.lineTo(x1, y + tickSize);
    ctx.moveTo(x2, y - tickSize);
    ctx.lineTo(x2, y + tickSize);
    ctx.stroke();
}


// --- Main Drawing ---

// Coordinates
const x_source_label = 70;
const x_sun = 70;
const y_sun = 145;
const r_sun = 20;
const x_s0 = 130;
const x_slits = 250;
const x_screen = 530;

const y_s2 = 250; // Reference horizontal line through S2
const d_pixels = 50;
const y_s1 = y_s2 - d_pixels;
const y_mid_slits = y_s1 + d_pixels / 2;
const y_p = 170;


// 1. Extended Source
ctx.textAlign = 'left';
ctx.fillText("extended", x_source_label - 30, 90);
ctx.fillText("source", x_source_label - 20, 110);
// Sun symbol
ctx.beginPath();
ctx.arc(x_sun, y_sun, r_sun, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
for (let i = 0; i < 8; i++) {
    const angle = i * Math.PI / 4;
    const startR = r_sun + 2;
    const endR = r_sun + 8;
    ctx.moveTo(x_sun + startR * Math.cos(angle), y_sun + startR * Math.sin(angle));
    ctx.lineTo(x_sun + endR * Math.cos(angle), y_sun + endR * Math.sin(angle));
}
ctx.stroke();

// 2. First Slit Plane (S0)
const s0_y_start = 150;
const s0_y_end = 300;
const s0_gap_h = 10;
ctx.beginPath();
ctx.moveTo(x_s0, s0_y_start);
ctx.lineTo(x_s0, y_mid_slits - s0_gap_h / 2);
ctx.moveTo(x_s0, y_mid_slits + s0_gap_h / 2);
ctx.lineTo(x_s0, s0_y_end);
ctx.stroke();
ctx.textAlign = 'center';
ctx.fillText("S₀", x_s0 - 25, y_mid_slits + 5);

// 3. Double Slit Plane (S1, S2)
const slits_y_start = 150;
const slits_y_end = 300;
const slit_gap_h = 8;
ctx.beginPath();
ctx.moveTo(x_slits, slits_y_start);
ctx.lineTo(x_slits, y_s1 - slit_gap_h / 2);
ctx.moveTo(x_slits, y_s1 + slit_gap_h / 2);
ctx.lineTo(x_slits, y_s2 - slit_gap_h / 2);
ctx.moveTo(x_slits, y_s2 + slit_gap_h / 2);
ctx.lineTo(x_slits, slits_y_end);
ctx.stroke();
// Labels for S1, S2
ctx.textAlign = 'left';
ctx.fillText("S₁", x_slits + 10, y_s1 - 10);
ctx.fillText("S₂", x_slits + 10, y_s2 + 15);
// Dimension 'd'
const x_d_line = x_slits - 20;
drawDimensionLineWithArrows(x_d_line, y_s1, x_d_line, y_s2);
ctx.beginPath();
ctx.moveTo(x_slits, y_s1);
ctx.lineTo(x_d_line, y_s1);
ctx.moveTo(x_slits, y_s2);
ctx.lineTo(x_d_line, y_s2);
ctx.stroke();
ctx.textAlign = 'center';
ctx.fillText("d", x_d_line - 15, y_mid_slits + 5);


// 4. Screen
const screen_y_start = 120;
const screen_y_end = 320;
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(x_screen, screen_y_start);
ctx.lineTo(x_screen, screen_y_end);
ctx.stroke();
// Hatching
ctx.lineWidth = 1;
ctx.beginPath();
for (let y = screen_y_start; y < screen_y_end; y += 10) {
    ctx.moveTo(x_screen, y);
    ctx.lineTo(x_screen + 10, y + 10);
}
ctx.stroke();
ctx.lineWidth = 2;
ctx.textAlign = 'center';
ctx.fillText("screen", x_screen, screen_y_start - 15);

// 5. Light Paths
ctx.beginPath();
// Path S1 to P
ctx.moveTo(x_slits, y_s1);
ctx.lineTo(x_screen, y_p);
// Path S2 to screen (horizontal)
ctx.moveTo(x_slits, y_s2);
ctx.lineTo(x_screen, y_s2);
ctx.stroke();

// 6. Labels P and x
ctx.textAlign = 'right';
ctx.fillText("P", x_screen - 10, y_p + 5);
// Dimension x
const top_of_s1_y = y_s1 - slit_gap_h / 2;
const x_dim_x_offset = x_screen + 30;
ctx.beginPath();
ctx.moveTo(x_screen, y_p);
ctx.lineTo(x_dim_x_offset, y_p);
ctx.moveTo(x_screen, top_of_s1_y);
ctx.lineTo(x_dim_x_offset, top_of_s1_y);
ctx.stroke();
drawDimensionLineWithArrows(x_dim_x_offset, top_of_s1_y, x_dim_x_offset, y_p);
ctx.textAlign = 'left';
ctx.fillText("x", x_dim_x_offset + 5, y_p + (top_of_s1_y - y_p)/2 + 5);


// 7. Horizontal Dimensions L0 and L1
const y_dim_line = 330;
ctx.lineWidth = 1.5;
// L0
drawHorizontalDimensionLine(x_s0, x_slits, y_dim_line);
ctx.textAlign = 'center';
ctx.fillText("L₀", (x_s0 + x_slits) / 2, y_dim_line + 20);
// L1
drawHorizontalDimensionLine(x_slits, x_screen, y_dim_line);
ctx.fillText("L₁", (x_slits + x_screen) / 2, y_dim_line + 20);
ctx.lineWidth = 2;

// 8. Figure Caption
ctx.font = 'bold 20px sans-serif';
ctx.fillText("Fig. 2.7", canvas.width / 2, 390);

</script>
</body>
</html>